<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
    <div class="w-full bg-[#ffffff] h-[100px] continer leading-[42px]">

        <div class="content flex  justify-between  items-center">
            <img class="log" :src="log" alt="">
            <div class="right-box" style="white-space: nowrap;">
                Payment Portal
            </div>
        </div>
    </div>
  </template>
<script lang="ts" setup>
  import { ref } from "vue";
  import { Check } from "@element-plus/icons-vue";
  import log from '@/assets/img/red-uti-logo.png'
  import equal from '@/assets/img/equal.png'
  

</script>
<style scoped lang="less">
.log {
    width: 146px;
    height: 43px;
}
header {
    display: flex;
    gap: 15px;
    justify-content: center;
}
.right-box {
    color: #477577;
    margin-left: 24px;
    font-weight: 700;
    font-size: 24px;
}
.continer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-family: Bicyclette;
}
</style>
    